<template>
    <view class="container">
        <!-- 顶部导航栏 -->
        <view class="nav-bar">
            <view class="left">
                <u-icon name="arrow-left" size="32" color="#333" @click="goBack"></u-icon>
            </view>
            <view class="title">文章详情</view>
            <view class="right">
                <u-icon name="more-dot-fill" size="32" color="#333" @click="showMore"></u-icon>
            </view>
        </view>
        
        <!-- 文章内容 -->
        <scroll-view class="content" scroll-y>
            <view class="article">
                <view class="header">
                    <view class="title">{{article.title}}</view>
                    <view class="info">
                        <view class="author">
                            <image class="avatar" :src="article.avatar" mode="aspectFill"></image>
                            <text>{{article.author}}</text>
                        </view>
                        <view class="meta">
                            <view class="item">
                                <u-icon name="eye" size="24" color="#999"></u-icon>
                                <text>{{article.views}}</text>
                            </view>
                            <view class="item">
                                <u-icon name="heart" size="24" color="#999"></u-icon>
                                <text>{{article.likes}}</text>
                            </view>
                        </view>
                    </view>
                </view>
                
                <rich-text class="body" :nodes="article.content"></rich-text>
                
                <view class="images" v-if="article.images.length > 0">
                    <image 
                        v-for="(img, index) in article.images" 
                        :key="index"
                        :src="img"
                        mode="widthFix"
                        @click="previewImage(article.images, index)"
                    ></image>
                </view>
                
                <view class="tags" v-if="article.tags.length > 0">
                    <view 
                        class="tag" 
                        v-for="(tag, index) in article.tags" 
                        :key="index"
                    >
                        {{tag}}
                    </view>
                </view>
            </view>
            
            <!-- 推荐阅读 -->
            <view class="recommendations" v-if="recommendations.length > 0">
                <view class="title">推荐阅读</view>
                <view 
                    class="recommendation-item" 
                    v-for="(item, index) in recommendations" 
                    :key="index"
                    @click="viewArticle(item)"
                >
                    <view class="info">
                        <view class="title">{{item.title}}</view>
                        <view class="meta">
                            <text class="author">{{item.author}}</text>
                            <text class="views">{{item.views}}阅读</text>
                        </view>
                    </view>
                    <image class="cover" :src="item.cover" mode="aspectFill"></image>
                </view>
            </view>
            
            <!-- 评论列表 -->
            <view class="comments">
                <view class="title">全部评论（{{comments.length}}）</view>
                <view 
                    class="comment-item" 
                    v-for="(item, index) in comments" 
                    :key="index"
                >
                    <view class="user">
                        <image class="avatar" :src="item.avatar" mode="aspectFill"></image>
                        <view class="info">
                            <text class="name">{{item.name}}</text>
                            <text class="time">{{item.time}}</text>
                        </view>
                    </view>
                    <view class="text">{{item.content}}</view>
                    <view class="actions">
                        <view class="action" @click="likeComment(item)">
                            <u-icon 
                                :name="item.liked ? 'heart-fill' : 'heart'" 
                                size="24" 
                                :color="item.liked ? '#FF4D4F' : '#999'"
                            ></u-icon>
                            <text>{{item.likes}}</text>
                        </view>
                        <view class="action" @click="replyComment(item)">
                            <u-icon name="message" size="24" color="#999"></u-icon>
                            <text>回复</text>
                        </view>
                    </view>
                    
                    <!-- 回复列表 -->
                    <view class="replies" v-if="item.replies.length > 0">
                        <view 
                            class="reply-item" 
                            v-for="(reply, replyIndex) in item.replies" 
                            :key="replyIndex"
                        >
                            <view class="user">
                                <text class="name">{{reply.name}}</text>
                                <text class="time">{{reply.time}}</text>
                            </view>
                            <view class="text">{{reply.content}}</view>
                        </view>
                    </view>
                </view>
                
                <!-- 加载更多 -->
                <view class="loading" v-if="loading">
                    <view class="loading-icon"></view>
                    <text>加载中...</text>
                </view>
                
                <!-- 没有更多 -->
                <view class="no-more" v-if="!hasMore">
                    <text>没有更多了</text>
                </view>
                
                <!-- 空状态 -->
                <view class="empty" v-if="comments.length === 0">
                    <image src="/static/images/empty.png" mode="aspectFit"></image>
                    <text>暂无评论</text>
                </view>
            </view>
        </scroll-view>
        
        <!-- 底部操作栏 -->
        <view class="action-bar">
            <view class="comment-box" @click="showCommentInput">
                <u-icon name="message" size="32" color="#999"></u-icon>
                <text>写评论...</text>
            </view>
            <view class="actions">
                <view class="action" @click="likeArticle">
                    <u-icon 
                        :name="article.liked ? 'heart-fill' : 'heart'" 
                        size="32" 
                        :color="article.liked ? '#FF4D4F' : '#999'"
                    ></u-icon>
                    <text>喜欢</text>
                </view>
                <view class="action" @click="collectArticle">
                    <u-icon 
                        :name="article.collected ? 'star-fill' : 'star'" 
                        size="32" 
                        :color="article.collected ? '#FAAD14' : '#999'"
                    ></u-icon>
                    <text>收藏</text>
                </view>
                <view class="action" @click="shareArticle">
                    <u-icon name="share" size="32" color="#999"></u-icon>
                    <text>分享</text>
                </view>
            </view>
        </view>
        
        <!-- 评论输入弹窗 -->
        <u-popup 
            v-model="showCommentPopup" 
            mode="bottom"
            border-radius="20"
            :close-on-click-overlay="true"
            @close="hideCommentInput"
        >
            <view class="comment-popup">
                <view class="header">
                    <text class="title">发表评论</text>
                    <u-icon name="close" size="32" color="#333" @click="hideCommentInput"></u-icon>
                </view>
                <view class="input-area">
                    <textarea 
                        v-model="commentText" 
                        placeholder="写下你的评论..."
                        maxlength="200"
                        auto-height
                    ></textarea>
                    <view class="count">{{commentText.length}}/200</view>
                </view>
                <view class="submit" @click="submitComment">发布</view>
            </view>
        </u-popup>
    </view>
</template>

<script>
export default {
    data() {
        return {
            article: {
                id: 1,
                title: '高血压患者的饮食指南',
                author: '王医生',
                avatar: '/static/images/doctor.png',
                content: '<p>高血压是一种常见的慢性疾病，合理的饮食控制对于高血压的管理非常重要。以下是高血压患者的饮食指南：</p><h3>1. 控制钠盐摄入</h3><p>减少钠盐摄入是控制血压的关键。每日食盐摄入量应控制在5-6克以内。避免食用腌制食品、咸味零食、加工肉类等高盐食品。</p><h3>2. 增加钾的摄入</h3><p>适当增加钾的摄入有助于降低血压。富含钾的食物包括香蕉、土豆、菠菜、番茄、橙子等新鲜蔬果。</p><h3>3. 控制总热量</h3><p>控制体重是降低血压的有效方法之一。保持健康的体重，控制总热量摄入，避免肥胖。</p><h3>4. 限制饮酒</h3><p>过量饮酒会导致血压升高。男性每日酒精摄入量不超过25克，女性不超过15克。</p><h3>5. 均衡饮食</h3><p>保证蛋白质、碳水化合物、脂肪的均衡摄入，增加膳食纤维摄入，多吃新鲜蔬菜水果。</p><p>坚持健康的饮食习惯，结合适当的运动和规律用药，能够有效控制高血压。</p>',
                views: 1245,
                likes: 326,
                liked: false,
                collected: false,
                images: [
                    '/static/images/article-1.jpg',
                    '/static/images/article-2.jpg'
                ],
                tags: ['高血压', '饮食', '健康管理']
            },
            recommendations: [
                {
                    id: 2,
                    title: '每天一个苹果，疾病远离我',
                    author: '张医生',
                    views: 876,
                    cover: '/static/images/article-3.jpg'
                },
                {
                    id: 3,
                    title: '糖尿病患者如何科学控制血糖',
                    author: '李医生',
                    views: 765,
                    cover: '/static/images/article-4.jpg'
                },
                {
                    id: 4,
                    title: '心脏健康：你需要知道的一切',
                    author: '刘医生',
                    views: 546,
                    cover: '/static/images/article-5.jpg'
                }
            ],
            comments: [
                {
                    id: 1,
                    name: '张先生',
                    avatar: '/static/images/avatar.png',
                    content: '感谢医生的建议，受益匪浅！我有一个疑问，对于年龄大的高血压患者，是否有特殊的饮食建议？',
                    time: '2024-03-20 10:30',
                    likes: 8,
                    liked: false,
                    replies: [
                        {
                            name: '王医生',
                            content: '您好，老年高血压患者应更注重低盐饮食，增加钙的摄入，多吃新鲜蔬果，保证适量蛋白质，少吃油腻食物。根据个人情况，可能还需要考虑伴随疾病的饮食控制。',
                            time: '2024-03-20 11:00'
                        }
                    ]
                }
            ],
            loading: false,
            hasMore: false,
            showCommentPopup: false,
            commentText: '',
            currentReply: null
        }
    },
    onLoad(options) {
        // 获取文章详情
        this.getArticleDetail(options.id)
    },
    methods: {
        goBack() {
            uni.navigateBack()
        },
        showMore() {
            uni.showActionSheet({
                itemList: ['分享', '举报'],
                success: (res) => {
                    if (res.tapIndex === 0) {
                        this.shareArticle()
                    } else if (res.tapIndex === 1) {
                        this.reportArticle()
                    }
                }
            })
        },
        getArticleDetail(id) {
            // 模拟获取文章详情
        },
        previewImage(images, current) {
            uni.previewImage({
                urls: images,
                current
            })
        },
        viewArticle(article) {
            uni.navigateTo({
                url: `/pages/health/article?id=${article.id}`
            })
        },
        likeArticle() {
            this.article.liked = !this.article.liked
            this.article.likes += this.article.liked ? 1 : -1
            
            uni.showToast({
                title: this.article.liked ? '已点赞' : '已取消点赞',
                icon: 'none'
            })
        },
        collectArticle() {
            this.article.collected = !this.article.collected
            
            uni.showToast({
                title: this.article.collected ? '已收藏' : '已取消收藏',
                icon: 'none'
            })
        },
        shareArticle() {
            uni.share({
                provider: 'weixin',
                scene: 'WXSceneSession',
                type: 0,
                title: this.article.title,
                summary: this.article.title,
                imageUrl: this.article.images[0] || '',
                success: (res) => {
                    console.log('分享成功')
                },
                fail: (err) => {
                    console.log('分享失败', err)
                }
            })
        },
        reportArticle() {
            uni.showModal({
                title: '举报',
                content: '确定要举报该文章吗？',
                success: (res) => {
                    if (res.confirm) {
                        uni.showToast({
                            title: '举报成功',
                            icon: 'success'
                        })
                    }
                }
            })
        },
        likeComment(comment) {
            comment.liked = !comment.liked
            comment.likes += comment.liked ? 1 : -1
        },
        replyComment(comment) {
            this.currentReply = comment
            this.commentText = `@${comment.name} `
            this.showCommentInput()
        },
        showCommentInput() {
            this.showCommentPopup = true
        },
        hideCommentInput() {
            this.showCommentPopup = false
            this.commentText = ''
            this.currentReply = null
        },
        submitComment() {
            if (!this.commentText.trim()) {
                uni.showToast({
                    title: '请输入评论内容',
                    icon: 'none'
                })
                return
            }
            
            if (this.currentReply) {
                // 回复评论
                this.currentReply.replies.push({
                    name: '我',
                    content: this.commentText,
                    time: '刚刚'
                })
            } else {
                // 新评论
                this.comments.unshift({
                    id: this.comments.length + 1,
                    name: '我',
                    avatar: '/static/images/avatar.png',
                    content: this.commentText,
                    time: '刚刚',
                    likes: 0,
                    liked: false,
                    replies: []
                })
            }
            
            this.hideCommentInput()
            
            uni.showToast({
                title: '评论成功',
                icon: 'success'
            })
        }
    }
}
</script>

<style lang="scss">
.container {
    min-height: 100vh;
    background-color: #F7F7FA;
    
    .nav-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx 30rpx;
        background-color: #fff;
        
        .title {
            font-size: 36rpx;
            font-weight: bold;
            color: #333;
        }
    }
    
    .content {
        height: calc(100vh - 200rpx);
        
        .article {
            background-color: #fff;
            padding: 30rpx;
            margin-bottom: 20rpx;
            
            .header {
                margin-bottom: 30rpx;
                
                .title {
                    font-size: 40rpx;
                    font-weight: bold;
                    color: #333;
                    line-height: 1.4;
                    margin-bottom: 20rpx;
                }
                
                .info {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    
                    .author {
                        display: flex;
                        align-items: center;
                        
                        .avatar {
                            width: 50rpx;
                            height: 50rpx;
                            border-radius: 50%;
                            margin-right: 10rpx;
                        }
                        
                        text {
                            font-size: 28rpx;
                            color: #666;
                        }
                    }
                    
                    .meta {
                        display: flex;
                        
                        .item {
                            display: flex;
                            align-items: center;
                            margin-left: 20rpx;
                            
                            text {
                                font-size: 24rpx;
                                color: #999;
                                margin-left: 10rpx;
                            }
                        }
                    }
                }
            }
            
            .body {
                font-size: 32rpx;
                color: #333;
                line-height: 1.8;
                margin-bottom: 30rpx;
            }
            
            .images {
                margin-bottom: 30rpx;
                
                image {
                    width: 100%;
                    border-radius: 10rpx;
                    margin-bottom: 20rpx;
                    
                    &:last-child {
                        margin-bottom: 0;
                    }
                }
            }
            
            .tags {
                display: flex;
                flex-wrap: wrap;
                
                .tag {
                    font-size: 24rpx;
                    color: #1890FF;
                    background-color: rgba(24, 144, 255, 0.1);
                    padding: 10rpx 20rpx;
                    border-radius: 30rpx;
                    margin-right: 20rpx;
                    margin-bottom: 10rpx;
                }
            }
        }
        
        .recommendations {
            background-color: #fff;
            padding: 30rpx;
            margin-bottom: 20rpx;
            
            .title {
                font-size: 32rpx;
                font-weight: bold;
                color: #333;
                margin-bottom: 20rpx;
            }
            
            .recommendation-item {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 20rpx 0;
                border-bottom: 2rpx solid #F7F7FA;
                
                &:last-child {
                    border-bottom: none;
                    padding-bottom: 0;
                }
                
                .info {
                    flex: 1;
                    margin-right: 20rpx;
                    
                    .title {
                        font-size: 28rpx;
                        font-weight: bold;
                        color: #333;
                        margin-bottom: 10rpx;
                    }
                    
                    .meta {
                        display: flex;
                        font-size: 24rpx;
                        color: #999;
                        
                        .author {
                            margin-right: 20rpx;
                        }
                    }
                }
                
                .cover {
                    width: 120rpx;
                    height: 80rpx;
                    border-radius: 10rpx;
                }
            }
        }
        
        .comments {
            background-color: #fff;
            padding: 30rpx;
            padding-bottom: 100rpx;
            
            .title {
                font-size: 32rpx;
                font-weight: bold;
                color: #333;
                margin-bottom: 20rpx;
            }
            
            .comment-item {
                padding: 20rpx 0;
                border-bottom: 2rpx solid #F7F7FA;
                
                &:last-child {
                    border-bottom: none;
                }
                
                .user {
                    display: flex;
                    align-items: center;
                    margin-bottom: 10rpx;
                    
                    .avatar {
                        width: 50rpx;
                        height: 50rpx;
                        border-radius: 50%;
                        margin-right: 10rpx;
                    }
                    
                    .info {
                        display: flex;
                        flex-direction: column;
                        
                        .name {
                            font-size: 28rpx;
                            color: #333;
                        }
                        
                        .time {
                            font-size: 24rpx;
                            color: #999;
                        }
                    }
                }
                
                .text {
                    font-size: 28rpx;
                    color: #333;
                    line-height: 1.6;
                    margin-bottom: 10rpx;
                }
                
                .actions {
                    display: flex;
                    margin-bottom: 10rpx;
                    
                    .action {
                        display: flex;
                        align-items: center;
                        margin-right: 20rpx;
                        
                        text {
                            font-size: 24rpx;
                            color: #999;
                            margin-left: 10rpx;
                        }
                    }
                }
                
                .replies {
                    background-color: #F7F7FA;
                    border-radius: 10rpx;
                    padding: 20rpx;
                    
                    .reply-item {
                        padding: 10rpx 0;
                        
                        &:last-child {
                            padding-bottom: 0;
                        }
                        
                        .user {
                            display: flex;
                            align-items: center;
                            margin-bottom: 10rpx;
                            
                            .name {
                                font-size: 28rpx;
                                color: #1890FF;
                                margin-right: 10rpx;
                            }
                            
                            .time {
                                font-size: 24rpx;
                                color: #999;
                            }
                        }
                        
                        .text {
                            font-size: 28rpx;
                            color: #333;
                            line-height: 1.6;
                            margin-bottom: 0;
                        }
                    }
                }
            }
            
            .loading, .no-more {
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 30rpx 0;
                
                .loading-icon {
                    width: 36rpx;
                    height: 36rpx;
                    border: 3rpx solid #1890FF;
                    border-radius: 50%;
                    border-top-color: transparent;
                    animation: loading-rotate 0.8s linear infinite;
                }
                
                @keyframes loading-rotate {
                    0% {
                        transform: rotate(0deg);
                    }
                    100% {
                        transform: rotate(360deg);
                    }
                }
                
                text {
                    font-size: 24rpx;
                    color: #999;
                    margin-left: 10rpx;
                }
            }
            
            .empty {
                display: flex;
                flex-direction: column;
                align-items: center;
                padding: 100rpx 0;
                
                image {
                    width: 200rpx;
                    height: 200rpx;
                    margin-bottom: 20rpx;
                }
                
                text {
                    font-size: 28rpx;
                    color: #999;
                }
            }
        }
    }
    
    .action-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        padding: 20rpx 30rpx;
        background-color: #fff;
        border-top: 2rpx solid #F7F7FA;
        
        .comment-box {
            flex: 1;
            display: flex;
            align-items: center;
            height: 60rpx;
            background-color: #F7F7FA;
            border-radius: 30rpx;
            padding: 0 20rpx;
            
            text {
                font-size: 28rpx;
                color: #999;
                margin-left: 10rpx;
            }
        }
        
        .actions {
            display: flex;
            margin-left: 20rpx;
            
            .action {
                display: flex;
                flex-direction: column;
                align-items: center;
                margin-left: 30rpx;
                
                text {
                    font-size: 20rpx;
                    color: #999;
                    margin-top: 4rpx;
                }
            }
        }
    }
    
    .comment-popup {
        padding: 30rpx;
        
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20rpx;
            
            .title {
                font-size: 32rpx;
                font-weight: bold;
                color: #333;
            }
        }
        
        .input-area {
            position: relative;
            margin-bottom: 20rpx;
            
            textarea {
                width: 100%;
                min-height: 200rpx;
                font-size: 28rpx;
                color: #333;
                line-height: 1.6;
                padding: 20rpx;
                background-color: #F7F7FA;
                border-radius: 10rpx;
            }
            
            .count {
                position: absolute;
                right: 20rpx;
                bottom: 20rpx;
                font-size: 24rpx;
                color: #999;
            }
        }
        
        .submit {
            height: 80rpx;
            line-height: 80rpx;
            text-align: center;
            font-size: 32rpx;
            color: #fff;
            background-color: #1890FF;
            border-radius: 40rpx;
        }
    }
}
</style> 